import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { statsOverview } from '../services/api';
import * as echarts from 'echarts';
const today = new Date().toISOString().slice(0, 10);
const startDate = ref(today);
const endDate = ref(today);
const overview = reactive({ totalFormulaMl: 0, totalBreastMinutes: 0, totalSleepMinutes: 0 });
const chartRef = ref(null);
let chart = null;
async function load() {
    const payload = {
        babyId: 1,
        startDate: startDate.value,
        endDate: endDate.value
    };
    const data = await statsOverview(payload);
    overview.totalFormulaMl = data.totalFormulaMl ?? 0;
    overview.totalBreastMinutes = data.totalBreastMinutes ?? 0;
    overview.totalSleepMinutes = data.totalSleepMinutes ?? 0;
    renderChart();
}
function renderChart() {
    if (!chartRef.value)
        return;
    if (!chart) {
        chart = echarts.init(chartRef.value);
        window.addEventListener('resize', handleResize);
    }
    chart.setOption({
        tooltip: {},
        grid: { left: 24, right: 12, top: 24, bottom: 24 },
        xAxis: { type: 'category', data: ['配方奶(ml)', '母乳(分)', '睡眠(分)'] },
        yAxis: { type: 'value' },
        series: [{
                type: 'bar',
                data: [overview.totalFormulaMl, overview.totalBreastMinutes, overview.totalSleepMinutes],
                itemStyle: { color: '#FFB6C1' }
            }]
    });
}
function handleResize() { if (chart)
    chart.resize(); }
onMounted(() => { renderChart(); load(); });
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    if (chart) {
        chart.dispose();
        chart = null;
    }
});
debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
const __VLS_ctx = {};
let __VLS_components;
let __VLS_directives;
// CSS variable injection 
// CSS variable injection end 
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "space-y-4" },
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "card flex items-center gap-3" },
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.input)({
    type: "date",
    ...{ class: "input w-auto" },
});
(__VLS_ctx.startDate);
__VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
__VLS_asFunctionalElement(__VLS_intrinsicElements.input)({
    type: "date",
    ...{ class: "input w-auto" },
});
(__VLS_ctx.endDate);
__VLS_asFunctionalElement(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({
    ...{ onClick: (__VLS_ctx.load) },
    ...{ class: "btn-primary" },
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "grid grid-cols-1 md:grid-cols-3 gap-4" },
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "card" },
});
(__VLS_ctx.overview.totalFormulaMl);
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "card" },
});
(__VLS_ctx.overview.totalBreastMinutes);
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "card" },
});
(__VLS_ctx.overview.totalSleepMinutes);
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ...{ class: "card" },
});
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
    ref: "chartRef",
    ...{ style: {} },
});
/** @type {typeof __VLS_ctx.chartRef} */ ;
/** @type {__VLS_StyleScopedClasses['space-y-4']} */ ;
/** @type {__VLS_StyleScopedClasses['card']} */ ;
/** @type {__VLS_StyleScopedClasses['flex']} */ ;
/** @type {__VLS_StyleScopedClasses['items-center']} */ ;
/** @type {__VLS_StyleScopedClasses['gap-3']} */ ;
/** @type {__VLS_StyleScopedClasses['input']} */ ;
/** @type {__VLS_StyleScopedClasses['w-auto']} */ ;
/** @type {__VLS_StyleScopedClasses['input']} */ ;
/** @type {__VLS_StyleScopedClasses['w-auto']} */ ;
/** @type {__VLS_StyleScopedClasses['btn-primary']} */ ;
/** @type {__VLS_StyleScopedClasses['grid']} */ ;
/** @type {__VLS_StyleScopedClasses['grid-cols-1']} */ ;
/** @type {__VLS_StyleScopedClasses['md:grid-cols-3']} */ ;
/** @type {__VLS_StyleScopedClasses['gap-4']} */ ;
/** @type {__VLS_StyleScopedClasses['card']} */ ;
/** @type {__VLS_StyleScopedClasses['card']} */ ;
/** @type {__VLS_StyleScopedClasses['card']} */ ;
/** @type {__VLS_StyleScopedClasses['card']} */ ;
var __VLS_dollars;
const __VLS_self = (await import('vue')).defineComponent({
    setup() {
        return {
            startDate: startDate,
            endDate: endDate,
            overview: overview,
            chartRef: chartRef,
            load: load,
        };
    },
});
export default (await import('vue')).defineComponent({
    setup() {
        return {};
    },
});
; /* PartiallyEnd: #4569/main.vue */
